<template>
  <div class="context" @wheel="handleWheel">
    <div style="width: 70%;height: 100%;display: flex;margin: 0 auto;" v-if="dataList.length != 0">
      <div style="display: flex;flex-direction: column;margin-right: 10px">
        <el-tooltip
            class="box-item"
            effect="light"
            placement="left"
        >

          <template #content>
            <div style="font-size: 15px">作者：{{ showData.user.name }}</div>
            <div style="font-size: 15px">标题：{{ showData.title }}</div>
            <div style="font-size: 15px">内容：{{ showData.description }}</div>
            <div style="font-size: 15px">点赞数：{{ showData.star }}</div>
            <div style="font-size: 15px">上传时间：{{ showData.create_time }}</div>
          </template>

          <el-avatar size="large"
              :src="showData.user.picture"
          />
          <!--          <el-image style="width: 100px; height: 100px" :src="showData.user.picture" />-->
        </el-tooltip>

        <!--            <el-button circle type="primary" size="large" style="margin-left: 0 !important;">点赞</el-button>-->
        <!--            <el-button circle type="primary" size="large" style="margin-left: 0 !important;margin-top: 20px">往上</el-button>-->
        <!--            <el-button circle type="primary" size="large" style="margin-left: 0 !important;margin-top: 20px">往下</el-button>-->
      </div>
      <transition name="fade" mode="out-in">
        <video autoplay controls style="width: 100%;height: 500px;" ref="jujiao" @keyup="handleKeyPress"
               :key="showData.video_uuid" muted="muted">
          <source :src="showData.video_uuid" type="video/mp4">
        </video>
      </transition>

      <div style="display: flex;flex-direction: column; margin-left: 20px">
        <el-button @click="dialogTableVisible = true" circle type="primary" size="large"
                   style="margin-left: 0 !important;">+
        </el-button>
        <!--        <el-button circle type="primary" size="large" style="margin-left: 0 !important;margin-top: 20px">🗑</el-button>-->
        <el-button v-if="videoStatus" circle type="primary" size="large" style="margin-left: 0 !important;margin-top: 20px" @click="stars">
          👍
        </el-button>
        <el-button v-else circle type="primary" size="large" style="margin-left: 0 !important;margin-top: 20px" @click="stars">
          <el-image :src="no"/>
        </el-button>
        <el-button circle type="primary" size="large" style="margin-left: 0 !important;margin-top: 20px"
                   @click="upVideo">⬆
        </el-button>
        <el-button circle type="primary" size="large" style="margin-left: 0 !important;margin-top: 20px"
                   @click="downVideo">⬇
        </el-button>
      </div>
    </div>
    <div v-else>
      <el-empty style="cursor: pointer" description="没有数据" @click="dialogTableVisible = true" />
    </div>
  </div>


  <el-dialog v-model="dialogTableVisible" title="分享趣事" width="800">
    <el-form label-width="100px">
      <!-- 文章标题 -->
      <el-form-item label="标题">
        <el-input v-model="form.title" placeholder="请输入标题"/>
      </el-form-item>

      <!-- 简述 -->
      <el-form-item label="简述">
        <el-input v-model="form.description" placeholder="用一句话描述你的视频"/>
      </el-form-item>

      <!-- 视频 -->
      <el-form-item label="视频">
        <div>
          <el-upload class="avatar-uploader"
                     method="post" action="http://localhost:8080/files/video"
                     :show-file-list="false"
                     :headers="{'token' : token}"
                     :on-success="        (response, file, fileList) => {
          return uploadSuccess(response);
        }">
            <video v-if="form.video" :src="form.video" controls
                   style="width: 350px;height: 350px">
              <source :src="form.video" type="video/mp4">
            </video>
            <el-icon v-else class="avatar-uploader-icon" :size="80" color="#79bbff">
              <Plus/>
            </el-icon>
          </el-upload>
        </div>
      </el-form-item>

      <!--      &lt;!&ndash; 是否为始匹配的滑块 &ndash;&gt;-->
      <!--      <el-form-item label="是否为视频">-->
      <!--        <el-switch v-model="form.status" active-color="#13ce66" inactive-color="#ff4949"></el-switch>-->
      <!--      </el-form-item>-->
    </el-form>
    <template #footer>
      <el-button type="primary" @click="life">分享</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import no from "@/assets/icon/no-click.png"
import {ref, onMounted, onBeforeUnmount} from 'vue';
import {Plus} from "@element-plus/icons-vue";
import {ElMessage} from 'element-plus'
import axios from "axios";
import {useRoute} from "vue-router";
const router = useRoute();
const useRouteStatus = router.params.status

onMounted(async () => {
  await getListToVideo()
  // console.log(showData.value)
  index.value = 0;

})
const index = ref(0);
const dialogTableVisible = ref(false);
const showData = ref({
  id: "",
  video_uuid: "",
  title: "",
  description: "",
  userId: "",
  name: "",
  picture: "",
  star: 0,
})

const videoStatus = ref(false)

const token = localStorage.getItem('token');

const form = ref({
  title: "",
  description: "",
  video: "",
})

const dataList = ref([])

const jujiao = ref(null)


const getListToVideo = async () => {
  await axios.get("life/list/"+useRouteStatus).then(res => {
    dataList.value = res.data
    if (dataList.value.length == 0) {
      return
    }
    dataList.value.forEach((item) => {
      item.user.picture = "http://localhost:8080/files/shows/" + item.user.picture
      item.video_uuid = "http://localhost:8080/files/video/" + item.video_uuid
      item.create_time = item.create_time.split("T")[0]
    })

    showData.value = dataList.value[0];

    getVideoStatus(showData.value.id)
    // setTimeout(function () {
    //   jujiao.value.focus();
    // }, 1000)
  })
}


const getVideoStatus = (id) => {
  axios.get("stars/" + id).then(res => {
    if (res.message == "是") {
      videoStatus.value = true;
    } else {
      videoStatus.value = false;
    }
    // console.log(videoStatus.value)
  })
}
// const timer = setInterval(function () {
//   if (!dialogTableVisible.value) {
//     jujiao.value.focus();
//   }
//
// }, 1500)

// const circleUrl = ref("525c0bd3d9bc4089898ca07a21f425dc");

const handleKeyPress = (event) => {
  // console.log("键盘", event)
  if (event.key == "ArrowDown") {

    event.preventDefault(); // 防止默认行为

    downVideo()
  } else if (event.key == "ArrowUp") {
    event.preventDefault(); // 防止默认行为

    upVideo()
  }
}

const handleWheel = (event) => {
  // 处理滚轮事件
  console.log('滚轮事件触发', event);
  if (event.deltaY > 0) {
    downVideo();
  } else if (event.deltaY < 0) {
    upVideo()
  }
};

// onBeforeUnmount(() => {
//   console.log("清楚定时器")
//   clearInterval(timer)
// })

const uploadSuccess = (response) => {
  form.value.video = "http://localhost:8080/files/video/" + response.message
  // console.log("视频地址",form.value.video)
}

const life = () => {
  axios.post("life/insert", form.value).then(res => {

    ElMessage({
      message: res.message,
      type: 'success',
      duration: 3000
    })

    getListToVideo();
    setTimeout(function () {
      form.value = {}
      dialogTableVisible.value = false
    }, 1000)

  })
}

//往前
const upVideo = () => {
  if (index.value == 0) {
    ElMessage({
      message: "已经到顶啦！",
      type: 'warning',
      duration: 3000
    })
    return
  }
  index.value--;
  showData.value = dataList.value[index.value];
  // console.log("up",index.value);
  // console.log("up",showData.value);
  getVideoStatus(showData.value.id)
}

//往后
const downVideo = () => {
  if (index.value === dataList.value.length - 1) {
    ElMessage({
      message: "已经到底啦！",
      type: 'warning',
      duration: 3000
    })
    return
  }

  index.value++;
  showData.value = dataList.value[index.value];
  getVideoStatus(showData.value.id)
  // console.log("down",index.value);
  // console.log("down",showData.value);
}

//点赞
const stars = () => {
  const idx = showData.value.video_uuid.lastIndexOf("/")
  const uuid = showData.value.video_uuid.substring(idx + 1)
  axios.get("life/like/" + showData.value.id).then(res => {
    if (res.message == "点赞成功") {
      ElMessage({
        message: res.message,
        type: 'success',
        duration: 2000
      })
    } else {
      ElMessage({
        message: res.message,
        type: 'warning',
        duration: 2000
      })
    }
    getVideoStatus(showData.value.id)
  })
}
</script>

<style scoped>
.context {
  margin-top: 2%;
  width: 100%;
  min-height: 500px;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>